<template>
    <div class="container">
        <el-row class="wrap-search">
            <el-button @click="addClick('')" type="primary" size="medium">添加</el-button>
        </el-row>
        <!--<el-row class="wrap-search">-->
            <!--<div class="search-item">-->
                <!--<div class="search-title">位置：</div>-->
                <!--<el-select filterable v-model="configList.param.position" placeholder="请选择">-->
                    <!--<el-option label="全部" value=""></el-option>-->
                    <!--<el-option-->
                            <!--v-for="item in statusArrList"-->
                            <!--:key="item.item"-->
                            <!--:label="item.value"-->
                            <!--:value="item.item">-->
                    <!--</el-option>-->
                <!--</el-select>-->
            <!--</div>-->
            <!--<el-button  class="search-btn" type="primary" @click="getList()">查询</el-button>-->
        <!--</el-row>-->
        <div class="">
            <table-list ref="tableList" :tableConfig='configList'>
                  <el-table-column min-width="120px" slot="image"  align="center" label="图片">
                      <template slot-scope="scope">
                          <!-- <img class="video-img" @click="imgClick(scope.row.images[0].fileUrl)" :src="scope.row.images.length?scope.row.images[0].fileUrl:''" alt=""> -->
                     <img class="video1-img" :src="scope.row.img" alt="">
                      </template>
                  </el-table-column>
                  <el-table-column class="btn"  label="操作" slot="btn" align="center" >
                    <template slot-scope="scope">
                        <el-button  type="primary"  @click="addClick(scope.row)"  size="small">编辑</el-button>
                       <el-button  class="search-btn" size="small" type="danger" @click="delLevel(scope.row.id)">删除</el-button>
                    </template>
                  </el-table-column>
            </table-list>
        </div>
        <el-dialog
            title="新增/编辑广告"
            :visible.sync="dialogVisible1"
            width="60%"
            >
            <div class="dialog-content">
                <el-form :model="information" :rules="rules" ref="information" label-width="120px" class="">
                    <!--<el-form-item label="位置：" prop="position">-->
                        <!--<el-select filterable v-model="information.position" placeholder="请选择">-->
                            <!--<el-option-->
                                    <!--v-for="item in statusArrList"-->
                                    <!--:key="item.item"-->
                                    <!--:label="item.value"-->
                                    <!--:value="item.item">-->
                            <!--</el-option>-->
                        <!--</el-select>-->
                    <!--</el-form-item>-->
                   <el-form-item class="logo" label="图片：" prop="imgKey">
                         <el-upload  list-type="picture-card"  
                            :http-request="myUpload"
                            :action="upLoadUrl"
                            :class="{uploadShow:uploadShow}"
                            :file-list='fileShowList'
                            multiple
                            :on-remove="handleRemove"
                            :before-upload="beforeAvatarUpload"
                         >
                            <i class="el-icon-plus"></i> 
                        </el-upload> 
                    </el-form-item>
                    <el-form-item class="" label="链接地址：" prop="imgName">
                        <el-input style="width: 200px;" class=""
                                  placeholder="请输入"
                                  v-model="information.imgName" ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('information')" >确 定</el-button>
                        <el-button @click="cancelBtn" type="primary">取 消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
export default {
    data() {
        return { 
            configList:{
                url:CONSTANT.URL.BANNER.LIST,
                configList:[
                    {  
                      slot:'image'
                    },
                    {
                        label: "链接地址",
                        prop: "img"
                    },
                    {
                        label: "上传时间",
                        prop: "gmtCreated"
                    },
                    {
                      slot:'btn'
                    }
                ],
                param:{
                },
                type:'',
                width:'',
                isPagination:true
            },
            fileShowList:[],
            dialogVisible:false,
            dialogVisible1:false,
            imgUrl:'',
            upLoadUrl:'',
            uploadShow:false,
            dataList:[],
            information:{
                imgKey: "",
                imgName: ""
            },  
            rules: {
                imgName: [
                    { required: true, message: '请输入链接地址', trigger: 'blur' }
                ],
                imgKey:[
                    {required: true, message: '请选择图片', trigger: 'blur' }
                ]
            },
            statusArrList:[
                {
                    item:'1',
                    value:'首页'
                },
                {
                    item:'2',
                    value:'车型'
                },
                {
                    item:'3',
                    value:'酒店'
                },
                {
                    item:'4',
                    value:'营地'
                },
                {
                    item:'5',
                    value:'驴行社'
                },
                {
                    item:'6',
                    value:'驴圈子'
                }
            ],
             imageUrl:''
        }
    },
    components: {
        'table-list':() => import('../common/my-table')
    },  
    mounted() {
       
    },
    methods: {
        beforeAvatarUpload(file) {
            console.log(file);
            this.fileShowList = [{
                url:file.img
            }]
            const isLt2M = file.size / 1024 / 1024 < 2;
            let url =CONSTANT.URL.COMMON.UPLOAD;
            let param = {
                suffix:file.name.split(".")[1],   // 文件后缀  png
                contentType:file.type             // 文件类型  image/png
            }
            common.requestAjax(url,param,null,(res)=> {
                this.upLoadUrl = res.data.bussData.uploadUrl;
                this.information.imgKey = res.data.bussData.fileKey
                let downloadUrl =   res.data.bussData.downloadUrl;
                common.uploadFile(this.upLoadUrl,file,file.type,(res)=>{
                    this.fileShowList = [{
                        url:downloadUrl
                    }]
                    if(this.fileShowList.length>9){
                        this.uploadShow = true;
                    }
                })
            });    
        },
        cancelBtn(){
            this.fileShowList = []
            this.dialogVisible1 = false;
        },
        getList(){
//            this.configList.param.position = this.configList.param.position?this.configList.param.position:null
            this.$refs.tableList.getList()
        },
        imgClick(url){
            this.imgUrl = url;
            this.dialogVisible = true;
        },
        myUpload(content) {
          // 重写覆盖上传方法
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                if (this.information.id) {
                    let url = CONSTANT.URL.BANNER.UPDATE;
                    let param = JSON.stringify(this.information);
                    common.requestAjax(url, param, null, res => {
                        if(res.status == 200) {
                            this.$message({
                                type: 'success',
                                message: '保存成功!'
                            });
                            this.getList();
                            this.information = {
                                imgKey: "",
                                imgName: ""
                            }
                            this.fileShowList = []
                            this.dialogVisible1 = false;
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                        }
                    });
                } else {
                    let url = CONSTANT.URL.BANNER.ADD;
                    let param = JSON.stringify(this.information);
                    common.requestAjax(url, param, null, res => {
                        if(res.status == 200) {
                            this.$message({
                                type: 'success',
                                message: '保存成功!'
                            });
                            this.getList();
                            this.information = {
                                imgKey: "",
                                imgName: ""
                            }
                            this.fileShowList = []
                            this.dialogVisible1 = false;
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                        }
                    });
                }

            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        addClick(item){
            this.dialogVisible1 = true;
            if (item) {
                this.information = {
                    imgKey: item.imgKey,
                    imgName: item.imgName,
                    id: item.id
                }
                this.fileShowList = [{url: item.img}]
            } else {
                this.information = {
                    imgKey: "",
                    imgName: "",
                    id: ""
                }
                this.fileShowList = []
            }

        },
        delLevel(id){
            this.$confirm('确定删除?', '提示', {           
                confirmButtonText: '确定',           
                cancelButtonText: '取消',           
                type: 'warning'         
            }).then(() => {           
                let  url = CONSTANT.URL.BANNER.DELETE,
                    param = {id: id}
                common.requestAjax(url,{},param,(res)=>{
                    if(res.status == 200){
                        this.$message({
                            type: 'success',
                            message:res.msg
                        });
                        this.getList();
                    }else{
                        this.$message({           
                            message: res.msg,           
                            type: 'warning'         
                        });
                    }
                }) 
   
            }).catch(() => {           
                this.$message({             
                    type: 'info',             
                    message: '已取消删除'           
                });                   
            });   
        },
         handleRemove(file, fileList) {     
            let deleteUrl = file.url;
            let list = this.fileShowList;
            list.forEach((item,index)=>{
                if(item.url == deleteUrl){
                    list.splice(index,1);
                    this.information.imageIds.splice(index,1)
                }
            })
            if(list.length<9){
                this.uploadShow = false;
            }
            this.fileShowList = list;
      }
    }
}
</script>

<style lang="scss">
    .container {
        .uploadShow  .el-upload{display: none;}
        .wrap-search{
            margin-bottom: 20px;
            .search-item{
                float: left;
                margin-right: 20px;
                margin-top: 20px;
            }
            button{
                float: left;
                margin-top: 20px;
            }
            .search-title{
                display: inline;
                width: 100px;
                height: 36px;
                line-height: 36px;
                text-align: right;
                margin-bottom: 20px;
                margin-right: 10px;
            }
        }
        .el-table__row{
            .cell{
                button{
                    margin-top: 10px;
                }
            }
            video{
                width: 100px;height: auto;
            }
            img.video1-img{
                width: 100px;height: 60px;
                cursor: pointer;
            }
        }
        .pagination {
            text-align: center;
            width: 80%;
            margin-top: 60px;
        }
        .el-dialog__body{

        }
        .user-num{
            color:#409EFF;
            cursor: pointer;
        }
        
        .avatar{
            width: 50px!important;
            height: 50px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
        }
    }
</style>
